<template>
  <div>
    <el-dialog
      title="监听器参数"
      :visible.sync="dialogVisible"
      width="700px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      @closed="$emit('close', formData.paramList)"
	  append-to-body
    >
      <el-form ref="form" :model="formData" :rules="rules" >
      	<el-tabs type="border-card" value="paramListTab">
      		<el-tab-pane label="监听器参数" name="paramListTab">
      			<el-row style="margin-bottom: 20px;">
      					<el-button type="primary" size="medium" @click="addParams">新增</el-button>
      			</el-row>
      			<el-table border :data="formData.paramList" style="width: 100%">
      				<el-table-column prop="type" label="类型" align="center" >
      					<template slot-scope="scope">
      						<el-form-item :prop="'paramList.'+scope.$index+'.type'" 
      						:rules="rules.type" >
      							<el-select v-model="scope.row.type">
      								<el-option v-for="item in paramTypes"
      								:key="item.value"
      								:label="item.label"
      								:value="item.value"
      								>
      								</el-option>
      							</el-select>
      						</el-form-item>
      					</template>
      				</el-table-column>
      				<el-table-column prop="name" label="名称"align="center" >
      					<template slot-scope="scope">
      						<el-form-item :prop="'paramList.'+scope.$index+'.name'"
      						:rules="rules.name" >
      							<el-input v-model="scope.row.name" ></el-input>
      						</el-form-item>
      					</template>
      				</el-table-column>
      				<el-table-column prop="value" label="值"align="center">
      					<template slot-scope="scope">
      						<el-form-item :prop="'paramList.'+scope.$index+'.value'"
      						:rules="rules.value" >
      							<el-input v-model="scope.row.value" ></el-input>
      						</el-form-item>
      					</template>
      				</el-table-column>
      				<el-table-column label="操作" width="82px" align="center" >
      					<template slot-scope="{row}">
      						<el-button size="mini" icon="el-icon-delete" @click="deleteParams(row)"></el-button>
      					</template>
      				</el-table-column>
      			</el-table>
      			</el-tab-pane>
      	</el-tabs>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="medium" @click="closeDialog">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
		dialogVisible: true,
		formData: {
			paramList: this.value
		},
		paramTypes:[
			{ label: '字符串', value: 'stringValue' },
			{ label: '表达式', value: 'expression' },
		],
		rules:{
					type:[{required: true, message: '请选择类型', trigger: 'change'}],
					name:[{required: true, message: '请输入', trigger: 'blur'}],
					value:[{required: true, message: '请输入', trigger: 'blur'}]
				}
    }
  },
  methods: {
    closeDialog() {
      this.$refs['form'].validate((validate)=>{
      	if(validate){
      		this.dialogVisible = false
      	}
      })
    },
	deleteParams(row){
		let index = this.formData.paramList.indexOf(row)
		this.formData.paramList.splice(index, 1)
	},
	addParams(){
		let data = {
			type:undefined,
			name:undefined,
			value:undefined
		}
		this.formData.paramList.push(data)
	},
  }
}
</script>

<style>
.flow-containers  .el-badge__content.is-fixed {
    top: 18px;
}

</style>
